<template>
  <!--离线包链接-->
  <div class="content_panel project_modules deal-list">
    <div class="content_panel_top">
      <h3 class="panel_title">
        <span>{{$t('pageTitle.offlinePackageLink')}}</span>
      </h3>
      <el-form ref="form" :model="form" :rules="rules" label-position="left" :label-width="labelWidth" class="module_form">
        <el-row>
          <el-col :span="8">
            <el-form-item prop="appItemInfo" :label="$t('system.appPackage')">
              <el-select v-model="form.appItemInfo" :placeholder="$t('system.appName')" style="width:100%;">
                <el-option v-for="item in appList" :key="item.id" :value="JSON.stringify(item)" :label="`${item.packageName}[${item.name}]`"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="utmSource" :label="$t('common.customChannelName')">
              <!--自定义渠道名-->
              <el-input v-model="form.utmSource" @keyup.native="replaceSpaces" :placeholder="$t('verify.plsInput')" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button @click="submitApplication" type="primary">{{ $t('common.submitPackageApplication') }}</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="module_content">
      <div class="content_panel project_modules">
        <div class="table_list">
          <el-table ref="table" :data="tableData" style="width: 100%;" :max-height="tableMaxHeight" :highlight-current-row="true">
            <!--app包名-->
            <el-table-column prop="appPackage" :label="$t('system.appPackage')" min-width="130">
              <template slot-scope="{ row }">{{ `${row.appPackage}[${row.appName}]` }}</template>
            </el-table-column>
            <!--渠道名-->
            <el-table-column prop="utmSource" :label="$t('common.channel')" min-width="130"></el-table-column>
            <!--申请提交时间-->
            <el-table-column prop="updateTime" :label="$t('common.applySubmitTime')" min-width="130">
              <template slot-scope="{ row }">{{ row.updateTime }}</template>
            </el-table-column>
            <!--打包处理进度-->
            <el-table-column prop="packStatus" :label="$t('common.baleSchedule')" min-width="130"></el-table-column>
            <!--apk下载链接-->
            <el-table-column prop="downloanUrl" :label="$t('common.apkDownloadLink')" min-width="130">
              <template slot-scope="{ row }">
                <a @click="goDownload(row.downloanUrl)" type="text" href="javascript:void(0);">{{ row.downloanUrl }}</a>
              </template>
            </el-table-column>
          </el-table>
          <!--分页组件-->
          <pagination @pageChange="pageChange" :page="page">
            <!--分页组件-->
          </pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import mixin from '@/service/mixin';
  import Pagination from '@/components/pagination';

  let that = null;
  export default {
    name: 'operation-channelLinkManage-offlinePackge',
    components: {
      Pagination
    },
    mixins: [mixin],
    data() {
      return {
        user: this.$storage.get('user'),
        labelWidth: this.$i18n.locale === 'zhCN' ? '110px' : '170px',
        appList: [],
        form: {
          appItemInfo: '',
          utmSource: ''
        },
        rules: {
          appItemInfo: [
            {
              required: true,
              message: this.$t('verify.plsInput'),
              trigger: 'blur'
            }
          ],
          utmSource: [
            {
              required: true,
              message: this.$t('verify.plsInput'),
              trigger: 'blur'
            }
          ]
        }
      };
    },
    methods: {
      // 获取打包记录
      getAppPackRecord() {
        const params = {
          domain: this.user.domain,
          company: this.user.companyName
        };
        this.$api.systemManage.getapppackrecord(params).then(res => {
          const { status, data, error } = res;
          if ('1' === status && '00000000' === error && data) {
            this.tableData = data.appPackRecords;
            const page = {
              totalRecord: data.total
            }
            this.setPage(page, this.page);
          }
          this.tableMaxHeight = document.body.clientHeight - 180;
        });
      },
      // 提交打包申请
      submitApplication() {
        this.$refs.form.validate(val => {
          if (val) {
            const form = this.form;
            const appItemInfo = JSON.parse(form.appItemInfo);
            const params = {
              utmSource: form.utmSource,
              operator: this.user.username,
              appName: appItemInfo.name,
              appPackage: appItemInfo.packageName,
              domain: this.user.domain,
              company: this.user.companyName
            };
            this.$api.systemManage.doapppack(params).then(res => {
              const { status, data, error } = res;
              if ('1' === status && '00000000' === error) {
                this.$message.success(this.$t('common.successfulOperation'));
                this.getAppPackRecord();
              }
            });
          }
        });
      },
      goDownload(url) {
        window.open(url);
      },
      getAppList() {
        const params = {
          appListDomain: this.$storage.get('user').domain
        };
        this.$api.systemManage.getAppListdomain(params).then(res => {
          const { status, data, error } = res;
          if ('1' === status && error === '00000000' && data) {
            if (data instanceof Array && data.length > 0) {
              this.appList = data;
              this.form.appItemInfo = JSON.stringify(this.appList[0]);
              this.getAppPackRecord();
            }
          }
        });
      },
      replaceSpaces() {
        this.form.utmSource = this.form.utmSource.replace(/\s+/g, '');
      }
    },
    filters: {},
    created() {
      that = this;
      this.getAppList();
    }
  };
</script>

<style lang="scss">
  [data-page='operation-channelLinkManage-offlinePackge'] {
    .noteRed {
      color: red;
    }
    .iptWidth {
      width: 200px;
    }
    .el-col {
      padding-left: 10px;
    }
    .el-table .cell,
    .el-table th > .cell {
      word-break: keep-all;
      word-wrap: break-word;
    }
    .el-tooltip__popper {
      max-width: 300px;
      word-break: break-all;
      background-color: #fff;
      box-shadow: 0px 0px 5px #ccc;
      color: #000;
    }
    .el-date-editor .el-range-separator {
      width: 35px;
    }
  }
</style>
